<template>
  <div class="les_box">
    <div class="top_content">
      <div class="tit">执法监督统计</div>
    </div>
    <div class="les_process_cnt">
         <el-row :gutter="10"   class="les_process_row">
            <el-col :span="6" v-for="item in progressList" :key="item.id" class="les_process_col">
                <div class="les_dot" :style="{height: height + 'px','border-radius': (height*2 + 'px'+' '+  height*2 + 'px' +' '+  0 +' '+ 0)}">
                    <div class="les_line" :style="{'border-radius': ((height*2 - 20) + 'px'+' '+  (height*2 - 20) + 'px' +' '+  0 +' '+ 0)}">
                        <div class="les_line_in" :style="{'border-radius': ( 0 +' '+ 0 +' '+ (height*2 - 20) + 'px'+' '+  (height*2 - 20) + 'px' )}"></div>
                    </div>
                    <div class="les_bg" :style="{'border-radius': ((height*2 - 40) + 'px'+' '+  (height*2 - 40) + 'px' +' '+  0 +' '+ 0)}"></div>
                </div>
            </el-col>
        </el-row>
    </div>
  </div>
</template>
<script>
// import API from "@/commons/api.js";
export default {
  props: {
    // commonDefaultParams: {
    //   type: Object,
    //   default: {}
    // }
  },
  data() {
    return {
      // 流程数据
       progressList: [
        {
            planNum: 2,   // 计划数量
            completeNum: 1,  // 完成数量
            id:1,
            name:"特讯室"
        },
        {
            planNum: 17,
            completeNum: 7,
            id:2,
            name:"询问室"
        },
        {
            planNum: 19,
            completeNum: 11,
            id:3,
            name:"讯问室"
        },
        {
            planNum: 249,
            completeNum: 58,
            id:4,
            name:"侯问室"
        }
      ],
      height:0,
    };
  },
  methods: {
      calculate(row){
          if(row.planNum == 0){
              return 0
          }else{
             return parseInt(((row.completeNum/row.planNum)*this.listLength).toFixed(0));
          }
      },
      windowChange() {
            let width = document.querySelector('.les_box .les_process_cnt .les_dot').offsetWidth;
            // console.log(width);
            this.height = parseInt((width/2).toFixed(0))
            // this.changeDate()
        },
  },
  computed: {},
  created() {
  },
  mounted() {
       this.windowChange()
       this.$nextTick(() => {
        window.addEventListener('resize', this.windowChange);
    });
  },
   beforeDestroy() {
        window.removeEventListener('resize', this.windowChange); // 通过有名函数 解除监听窗口事件
    }
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.les_box {
  position: relative;
  min-width: 300px;
  width: 100%;
  height: 100%;
  padding: 0 5px !important;
  border: 1px solid #07515c;
  background: #12243a;
  box-shadow: 0px 0px 10px 0px rgba(7, 81, 92, 1) inset;
//   background-image: url(../../assets/img/sign.png);
  background-repeat: no-repeat;
  background-position: 50% 12px;
  background-size: 42%;
  .top_content {
    line-height: 22px;
    text-align: left;
    font-size: 16px;
    color: #00ffff;
    padding: 10px;
  }
  .les_process_cnt{
    height: calc(100% - 42px);
    .les_process_num_tit{
        color: #ffffff;
        font-size: 12px;
        text-align: right;
        line-height: 20px;
        padding-right: 20px;
    }
    .les_process_row{
        margin-bottom: 10px;
        .les_process_col{
            .les_dot{
                background: #12243A;
                padding: 20px 20px 0 20px;
                position: relative;
                overflow: hidden;
                .les_line{
                    width: calc(100% - 20px);
                    height: calc(100% - 10px);
                    background: yellow;
                    position: absolute;
                    left: 10px;
                    bottom: 0;
                    transform: rotate(-30deg);
                    transform-origin: 50% 100%;
                    .les_line_in{
                        width: 100%;
                        height: 100%;
                        background: #164255;
                        position: absolute;
                        left: 0;
                        top: 100%;
                    }
                }
                .les_bg{
                    width: 100%;
                    height: 100%;
                    background: #12243A;
                    position: relative;
                    z-index: 10;
                }
            }
        }
    }
  }
}
.skinTwo{
    .les_box{
        box-shadow: 0px 0px 10px 0px #027ec5 inset;
        border: 1px solid #027ec5;
        background: rgba(14,23,43,.5);
        // background-image: url(../../assets/img/sign_skinTwo.png);
        background-repeat: no-repeat;
        background-position: 50% 12px;
        background-size: 20%;
         .top_content {
            color: #41baff;
        }
    }
}
</style>
<style>
</style>